<template>
    <!-- 应用与属性组管理页面的特定组件 -->
    <!-- 属性组已关联属性 -->
    <div class="linked_attribute">
        <card title="已关联属性">
            <el-table :data="tableData" @selection-change="handleSelect">
                <el-table-column type="selection" />
                <el-table-column prop="attrName" label="属性名" />
                <el-table-column prop="valueSelect" label="可选值" />
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="text" @click="unlinkAttributes(row.attrGroupRelationId)">解除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <template #bottom-left>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>

            <template #bottom-right>
                <el-button type="primary" @click="unlinkAttributes" :disabled="isUnlinkingButtonDisabled">
                    解除所选
                </el-button>
            </template>
        </card>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';
export default {
    data() {
        return {
            tableData: [],

            selectedId: [],
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/pms/findAttrGroupRelation',
            paginable: true,
            params: {
                categoryId: 'catalogId',
            },
        }),
    ],

    props: ['categoryId', 'categoryName'],

    computed: {
        // 解除所选关联按钮是否禁用
        isUnlinkingButtonDisabled() {
            return !this.selectedId.length;
        },
    },

    methods: {
        // 解除关联属性
        unlinkAttributes(id) {
            this.$confirm('是否确定删除数据', '删除提示', {
                showClose: false,
                closeOnClickModal: false,
                type: 'error',
            })
                .then(() => {
                    this.$$delete('/yxl/pms/deleteAttrGroupRelation', {
                        attrGroupRelationId: typeof id === 'number' ? id : this.selectedId.toString(),
                    }).then(this.query);
                })
                .catch(function () {});
        },

        handleSelect(selectedRows) {
            this.selectedId = selectedRows.map(row => row.attrGroupRelationId);
        },
    },
};
</script>